<template>
  <div class="flex items-center">
    <el-date-picker
      v-model="_modelValue"
      type="datetimerange"
      :value-format="format"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :shortcuts="shortcuts"
      @change="timeChange"
    />
    <div class="ml20 flex items-center">
      <template v-for="(item, index) in shortcuts" :key="index">
        <div class="shortcuts-btn" @click="selectedItem(item)">
          {{ item.text }}
        </div>
      </template>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "shortcuts-time",
};
</script>
<script setup lang="ts">
import { ref, getCurrentInstance, watch } from "vue";
import dayjs from "dayjs";
const { proxy } = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    modelValue?: string | number | string[] | number[] | any;
    shortcuts?: boolean;
    btnShortcuts?: boolean;
    format?: string;
  }>(),
  {
    modelValue: "",
    shortcuts: true,
    btnShortcuts: true,
    format: "YYYY-MM-DD HH:mm:ss",
  }
);

const _modelValue = ref<string | number | string[] | number[] | any>(
  props.modelValue
);

const emit = defineEmits(["change", "update:modelValue"]);

let now = new Date();
let nowTime = now.getTime(); //当前时间戳
let nowDay = now.toLocaleDateString(); //当天
let nowDayTime = new Date(nowDay).getTime(); //当天开始时间戳
let nowMonth = now.getMonth(); //当前月
let nowYear = now.getFullYear(); //当前年

const shortcuts = [
  {
    text: "今天",
    key: "today",
    value: () => {
      const start = nowDayTime;
      const end = nowDayTime + 3600 * 1000 * 24 - 1;
      return [nowDayTime, end];
    },
  },
  {
    text: "昨天",
    key: "lastDay",
    value: () => {
      const start = nowDayTime - 3600 * 1000 * 24;
      const end = nowDayTime - 1;
      return [start, end];
    },
  },
  {
    text: "最近三天",
    key: "lastThreeDays",
    value: () => {
      const start = nowDayTime - 3600 * 1000 * 24 * 2;
      const end = nowDayTime + 3600 * 1000 * 24 - 1;
      return [start, end];
    },
  },
  {
    text: "最近七天",
    key: "lastSevenDays",
    value: () => {
      const start = nowDayTime - 3600 * 1000 * 24 * 6;
      const end = nowDayTime + 3600 * 1000 * 24 - 1;
      return [start, end];
    },
  },
  {
    text: "本月",
    key: "month",
    value: () => {
      let start = new Date(nowYear, nowMonth, 1).getTime(); //本月开始时间戳
      let end = new Date(nowYear, nowMonth + 1, 0).getTime(); // 本月结束时间戳
      return [start, end];
    },
  },
  {
    text: "最近三个月",
    key: "lastThreeMonth",
    value: () => {
      let start: any = nowTime;
      var month = now.getMonth() + 1;
      var day = now.getDate();
      //当前月的总天数
      var endMonthDay = new Date(nowYear, month, 0).getDate();
      if (false) {
        start = new Date(nowYear - 1, 12 - (3 - month) - 1).getTime();
      } else {
        start = new Date(nowYear, month - 3 - 1).getTime();
      }
      let end = new Date(nowYear + "-" + month).getTime() - 1;
      return [start, end];
    },
  },
  {
    text: "今年",
    key: "nowYear",
    value: () => {
      let start = new Date(nowYear, 0).getTime();
      let end = nowTime;
      return [start, end];
    },
  },
];

const selectedItem = (item: any) => {
  let time = item.value(),
    date = [
      dayjs(time[0]).format(props.format),
      dayjs(time[1]).format(props.format),
    ];
  emit("change", date);
  emit("update:modelValue", date);
  _modelValue.value = date;
};

const shortcutsTimePickerRef = ref<HTMLElement>();

const timeChange = (res: any) => {
  emit("change", res);
  emit("update:modelValue", res);
};

watch(
  () => props.modelValue,
  (val: any) => {
    if (val == "") {
      _modelValue.value = "";
    }
  },
  { deep: true }
);
</script>

<style scoped>
.shortcuts-btn {
  height: 30px;
  border: 1px solid var(--el-border-color);
  margin-right: 10px;
  padding: 0 20px;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  line-height: 30px;
  white-space: nowrap;
}
</style>